<template>
  <div>
    <a-modal :visible="visible" :title="title" @ok="handleOk" @cancel="cancel">
      <div class="content">
        <div class="icon"><i class="iconfont icon-sucai-16px-shibai"></i></div>
        <div>{{ content }}</div>
      </div>
      <a-row type="flex" justify="center" style="color: #8d8d8d">
        <slot></slot>
      </a-row>
    </a-modal>
  </div>
</template>
<script>
import { defineComponent } from 'vue';
export default defineComponent({
  props: {
    title: {
      type: String,
      default: '',
    },
    visible: {
      type: Boolean,
      default: false,
    },
    content: {
      type: String,
      default: '',
    },
  },
  setup(props, { emit }) {
    const cancel = () => {
      emit('cancel');
      emit('update:visible', false);
    };
    const handleOk = () => {
      emit('confirm');
      cancel();
    };

    return {
      handleOk,
      cancel,
    };
  },
  emits: {
    confirm: null,
    'update:visible': null,
    cancel: null,
  },
});
</script>

<style lang="less" scoped>
.content {
  height: 150px;
  font-size: 20px;
  text-align: center;
}
.icon {
  text-align: center;
  &-sucai-16px-shibai {
    position: relative;
    color: #fff;
    font-size: 50px;
    background-color: #ff6c6c;
    border-radius: 25px;
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      display: block;
      width: 50px;
      height: 50px;
      background-color: transparent;
      border: 3px solid #fff;
      border-radius: 20px;
      content: '';
    }
  }
}
</style>
